import React from 'react'
import Message from './Message'
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      message: 'hello react-component',
      isShow: true,
    }
    console.log('constructor')
  }
  changeMessage() {
    this.setState({
      message: 'hi，你好'
    })
  }
  changeShow() {
    this.setState({
      isShow: !this.state.isShow
    })
  }
  render () {
    console.log('render')
    const { message, isShow } = this.state
    return (
      <div>
        <h1>哈哈哈</h1>
        <p>{ message }</p>
        <button onClick={() => this.changeMessage()}>修改</button>
        <button onClick={() => this.changeShow()}>切换</button>
        { isShow && <Message /> }
      </div>
    )
  }
  // 组件刚加载完成
  componentDidMount() {
    console.log('componentDidMount')
  }
  // 组件更新完成
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate', snapshot)
  }

  // 不常用的生命周期
  // 控制是否更新会重新执行render函数，即是否重新渲染
  shouldComponentUpdate() {
    return true
  }

  // 这里返回的东西可以做componentDidUpdate中获取到
  getSnapshotBeforeUpdate() {
    console.log('getSnapshotBeforeUpdate')
    return {
      scrollPosition: 1000
    }
  }
}

export default App
